<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Translation</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
        }

        .loading {
            display: flex;
            flex-direction: column;
            position: fixed;
            padding: 1%;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: #fafafa;
            overflow: auto;
        }

        .loading > .logo {
            margin: auto auto 0;
            width: 96px;
            height: 96px;
            position: relative;
        }

        .loading > .logo > svg {
            width: 100%;
            height: 100%;
            z-index: 3;
            position: relative;
        }

        .loading > .logo > .bg {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            overflow: hidden;
        }

        .loading > .logo > .bg.shader {
            z-index: -1;
            filter: blur(15px);
        }

        .loading > .logo > .bg::before {
            width: 100%;
            height: 100%;
            display: block;
            content: '';
            transform: scale(3);
            animation: rotate 5s linear infinite, move 12s linear infinite;
            background-image: url("");
            background-size: cover;
        }

        @keyframes rotate {
            0% {
                transform: scale(3) rotate(0deg);
            }
            100% {
                transform: scale(3) rotate(360deg);
            }
        }

        @keyframes move {
            0% {
                transform-origin: 30% 30%;
            }
            25% {
                transform-origin: 30% 65%;
            }
            50% {
                transform-origin: 65% 30%;
            }
            75% {
                transform-origin: 65% 65%;
            }
            100% {
                transform-origin: 30% 30%;
            }
        }

        .loading .content {
            margin: 30px auto auto;
            font-size: 26px;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        a#link {
            color: #666;
            text-decoration: none;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="logo">
        <div class="bg shader"></div>
        <div class="bg"></div>
        <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <defs>
                <linearGradient id="bg" x1="-0.473" y1="16.473" x2="14.871" y2="1.129"
                                gradientTransform="matrix(1, 0, 0, -1, 0, 16)" gradientUnits="userSpaceOnUse">
                    <stop offset="0.17" stop-color="#07c3f2"/>
                    <stop offset="0.97" stop-color="#087cfa"/>
                </linearGradient>
            </defs>
            <path fill="url(#bg)"
                  d="M0,0V16H16V0ZM5.835,9.224l-.113-.113s-.828.564-1.2.79a14.393,14.393,0,0,1-2.259,1.243l-.9-1.506A13.033,13.033,0,0,0,4.367,8.282l.188-.113-.113-.15A6.147,6.147,0,0,1,3.388,6.362c-.113-.226-.188-.489-.3-.753H4.631c.037.113.113.226.15.339a6.379,6.379,0,0,0,.791,1.167l.113.151L5.8,7.115a4.907,4.907,0,0,0,.79-1.167A5.2,5.2,0,0,0,7.04,4.593l.038-.3H1.431V2.861H5.007V1.129H6.438V2.861h3.576V4.292H8.659l-.038.339a6.877,6.877,0,0,1-.527,1.731A8.722,8.722,0,0,1,7.04,8.019l-.113.15.3.189c.414.226.828.489,1.318.753l-.715,1.43A13,13,0,0,1,5.835,9.224Zm7.454,4.705-.828-2.258H9.675l-.828,2.258H7.04l3.2-7.9H11.9l3.2,7.905Zm-2.221-5.91.9,2.3H10.165Z"/>
        </svg>
    </div>
    <div class="content">
        <span id="loading-text">Loading...</span>
        <a id="link" href="https://intellij-translation.yiiguxing.top" target="_blank">OPEN IN BROWSER</a>
    </div>
</div>
<script>
    // Here will be matched and replaced, DO NOT MODIFY!!!
    // Config Start
    const config = {
        fragment: "",
        intellijPlatform: "",
        dark: false,
    };
    // Config End

    const BASE_URL = "https://intellij-translation.yiiguxing.top";

    function getTargetUrl(baseURL) {
        const parameters = [];
        if (config.intellijPlatform) {
            parameters.push(`intellij=${config.intellijPlatform}`);
        }
        if (config.dark) {
            parameters.push('dark=true');
        }
        const query = parameters.length > 0 ? `?${parameters.join('&')}` : '';
        return `${baseURL}/${query}${config.fragment}`
    }

    function updateLink(url) {
        const a = document.querySelector('#link');
        if (a) {
            a.href = url
        }
    }

    (function () {
        const fragment = config.fragment.replace('&compact=true', '');
        updateLink(`${BASE_URL}/${fragment}`);
        window.location.replace(getTargetUrl(BASE_URL))
    })();
</script>
</body>
</html>